<template>
  <div class="main">
    <div class="main-header">
      <div v-for="item in systemPrintList" :key="item.name">
        <div :class="['p-x-10', item.isActive ? 'header-active' : 'header-max']" @click="setActiveItem(item)">{{ item.name }}</div>
      </div>
    </div>
    <div class="main-container">
      <div class="container-h">
        <div>任务ID</div>
        <div>任务状态</div>
        <div>文档数</div>
        <div>任务下发时间</div>
      </div>
      <div class="container-content">
        <template v-for="item in printTaskList" :key="item.printId">
          <div class="task-list">
            <span class="task-list-item">{{ item.printId }}</span>
            <span class="task-list-item">{{ item.printStatusName }}</span>
            <span class="task-list-item">1</span>
            <span class="task-list-item">{{ item.printTime }}</span>
          </div>
        </template>
      </div>
    </div>
    <div class="main-footer">
      <button @click="queueClearAllClick">删除所有任务</button>
      <button @click="suspendClick">{{ isSuspend ? '继续' : '暂停' }}打印</button>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { onMounted, ref, computed } from 'vue'
import { ipcRenderer } from 'electron'

const store = useStore()
const isSuspend = ref(false)
/**任务队列 */
const printTaskList = computed(() => {
  const activeData = systemPrintList.value.find((f) => f.isActive)
  if (activeData && store.state.common.systemPrintTask[activeData.name]) {
    return store.state.common.systemPrintTask[activeData.name]
  }
  return []
})

const systemPrintList = computed(() => store.state.common.systemPrintList)

const setActiveItem = (item) => {
  systemPrintList.value.forEach((f) => {
    f.isActive = f.name === item.name
  })
}

const suspendClick = async () => {
  isSuspend.value = !isSuspend.value
  await ipcRenderer.invoke('suspendChange')
}

const queueClearAllClick = async () => {
  await ipcRenderer.invoke('queueClearAll')
}

onMounted(async () => {
  await store.dispatch('getPrintList')

  ipcRenderer.on('set_systemPrintTask', (event, data) => {
    store.commit('SET_SYSTEMPRINTTASK', data)
  })
  ipcRenderer.on('set_isSuspend', (event, data) => {
    isSuspend.value = data
  })
  ipcRenderer.on('download-progress', (event, data) => {
    console.log('res', data)
  })

  ipcRenderer.on('refreshPrintList', (event, data) => {
    store.dispatch('getPrintList', true)
  })
})
</script>

<style lang="less">
.main {
  .main-header {
    height: 25px;
    display: flex;
    margin-top: 2px;
    overflow: hidden;
    .header-active {
      background-color: #fff;
    }
    .header-max {
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    div {
      line-height: 25px;
      cursor: pointer;
      :hover {
        background-color: #fff;
      }
    }
  }
  .main-container {
    height: calc(100vh - 50px - 39px);
    padding-top: 10px;
    background-color: #fff;

    .container-h {
      height: 32px;
      display: flex;
      justify-content: space-between;
      margin: 0 7px;
      border: 1px solid #999999;

      div {
        width: 25%;
        line-height: 30px;
        text-align: center;
        &:hover {
          background-color: #dadada;
        }
      }
    }
    .container-content {
      height: calc(100% - 2px - 32px);
      margin: 0 7px;
      overflow-y: auto;
      .task-list {
        width: 100%;
        display: flex;
        .task-list-item {
          display: block;
          width: 25%;
          line-height: 30px;
          text-align: center;
        }
      }
    }
  }
  .main-footer {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 7px;
    background-color: #fff;
    button {
      margin-left: 15px;
      cursor: pointer;
    }
  }
}

.p-x-10 {
  padding: 0 10px;
}
</style>
